<script setup lang="ts">
import { ref, computed, PropType } from "vue";

interface ListItem {
  time?: string;
  valueFormat?: string;
  deptName?: string;
  systemName?: string;
  energyTypeName?: string;
  unit?: string;
}

interface columItem {
  name?: string;
  value?: string;
  width?: string;
}

const props = defineProps({
  tableData: {
    type: Array as PropType<Array<ListItem>>,
    default: () => []
  },
  tableColums: {
    type: Array as PropType<Array<columItem>>,
    default: () => []
  }
});

const currentPage = ref(1);
const pageSize = ref(10);
const total = computed(() => props.tableData.length);

// 计算属性，用于获取当前页的数据
const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return props.tableData.slice(startIndex, endIndex);
});

// 分页大小改变时的回调
function handleSizeChange(val) {
  pageSize.value = val;
}

// 当前页改变时的回调
function handleCurrentChange(val) {
  currentPage.value = val;
}
</script>

<template>
  <div class="table-paginated">
    <!-- 列表内容 -->
    <px-table ref="tableRef" :data="paginatedData" style="width: 100%" height="320" border>
      <px-table-column v-if="paginatedData.length" width="60" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (currentPage - 1) * pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column v-for="item in tableColums" :key="item.name" :property="item.value" :label="item.name" :width="item.width" />
    </px-table>
    <!-- 分页组件 -->
    <div class="table-pagination">
      <px-pagination
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-paginated {
  width: 100%;
  height: 404px;
  // padding: 16px;
  // margin-top: 16px;

  .table-pagination {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
    margin-top: 16px;
  }
}
</style>
